<template>
    <view>
        <view class="Evalute">
            <view class="User">
                <image :src="$imgUrls(pageData.v_headimg)" v-if="pageData.v_headimg" mode="aspectFill" class="Head"></image>
                <view class="Info">
                    <view class="Info_user">
                        <view class="d-flex a-center">
                            <text class="color_33 size26">{{ pageData.v_name }}</text>
                            <!-- <view class="Vip">VIP等级</view> -->
                        </view>
                        <text class="color_33 size26">{{ pageData.updated_at }}</text>
                    </view>
                    <u-rate count="5" :value="pageData.star" readonly :gutter="1" size="16"></u-rate>
                </view>
            </view>
            <text class="color_33 size26 ellipsis_2 m-top16">{{ pageData.comment_word }}</text>
            <text class="color size26 m-top10">{{ pageData.goods_name }}</text>
            <view class="Imgs" v-if="pageData.comment_pic">
                <image :src="$imgUrls(Itm)" mode="aspectFill" class="Imgsli" @click.stop="$common.ImageNum(inx, pageData.comment_pic)" v-for="(Itm, inx) in pageData.comment_pic" :key="inx"></image>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: ['pageData'],
        data() {
            return {
                Img: 'https://imgcdn.mogoie.com/6099/1693813515733.jpg',
                value: 2
            };
        },
        methods: {}
    };
</script>

<style lang="scss" scoped>
    .Evalute {
        width: 100%;
        margin-top: 20rpx;
        background-color: #fff;
        padding: 20rpx;
        display: flex;
        flex-direction: column;

        .User {
            width: 100%;
            display: flex;
            align-items: center;

            .Head {
                width: 60rpx;
                height: 60rpx;
                border-radius: 50%;
                margin-right: 20rpx;
            }

            .Info {
                flex: 1;

                &_user {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .Vip {
                        padding: 0 10rpx;
                        color: #fff;
                        font-size: 20rpx;
                        background-color: var(--color);
                        margin-left: 10rpx;
                    }
                }
            }
        }

        .Imgs {
            width: 100%;
            margin-top: 20rpx;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10rpx;
            box-sizing: border-box;

            .Imgsli {
                height: 200rpx;
                border-radius: 6rpx;
            }
        }
    }
</style>
